<template>
  <div class="reset-pwd" :class="[device.lang]">
    <view class="rtl">
      <lg-topbar bgColor="#fff" height="160rpx">
        <image style="width: 40rpx;height: 40rpx; padding: 40rpx;" src="/static/images/login/return.png" mode=""
          @click="handleBack">
        </image>
      </lg-topbar>
      <view class="ml-42 title">{{ showVerificationInput ? t("Enter Verification Code") : t("Reset Password") }}</view>
      <view v-if="!showVerificationInput" class="phone-area">
        <lgInput v-model="mobile" :isImages="false" :isArea="true" placeholder="Enter phone" content="Phone"
          areaCode="966" />
      </view>
      <div v-else class="code-area">
        <uv-code-input v-model="verificationCode" maxlength="6" size="90rpx" @change="codeChange"
          @finish="codeFinish"></uv-code-input>
      </div>
      <uv-button class="next-button" :class="{ 'disabled': !isFormValid }" :disabled="isCountingDown"
        :color="isFormValid ? '#1AAD19' : '#93D592'" type="primary" :text="buttonText"
        @click="handleNextClick"></uv-button>

      <uv-modal ref="successModal">
        <view class="slot-content success-model">
          <uv-image :src="resetImg" width="68rpx" height="68rpx"></uv-image>
          <text class="model-title">Verification Successful!</text>
          <text class="model-content">Your new password will be sent via SMS. Please check your messages.</text>
        </view>
        <template v-slot:confirmButton>
          <uv-button class="next-button" color="#1AAD19" type="default" @click="handleBack">{{ t("Return to Login")
          }}</uv-button>
        </template>
      </uv-modal>
    </view>
  </div>
</template>

<script setup>
import lgInput from "./components/lg-input.vue";
import { ref, computed } from "vue"
import { useI18n } from "vue-i18n";
import AuthAPI from "@/api/modules/auth";
import resetImg from "@/static/images/login/reset-success.png";
import { useDeviceStore } from "@/store/modules/device"
const { t } = useI18n()
const device = useDeviceStore()
const mobile = ref("")
const isCountingDown = ref(false);
const countdown = ref(60);
const buttonText = ref('Next');
const showVerificationInput = ref(false);
const verificationCode = ref('');
const successModal = ref()

const isFormValid = computed(() => {
  const phoneValid = mobile.value;
  return phoneValid
  // && checkboxValue.value;
});

function handleBack() {
  uni.navigateBack()
}

function handleNextClick() {
  if (isFormValid.value) {
    sendVerificationCode()
  }
}

function startCountdown() {
  isCountingDown.value = true;
  buttonText.value = `Retry after ${countdown.value}s`;
  const interval = setInterval(() => {
    countdown.value -= 1;
    buttonText.value = `Retry after ${countdown.value}s`;
    if (countdown.value <= 0) {
      clearInterval(interval);
      isCountingDown.value = false;
      buttonText.value = 'Resend';
      countdown.value = 60;
    }
  }, 1000);
}
function sendVerificationCode() {
  AuthAPI.sendCode(mobile.value).then(res => {
    if (res.code === 200) {
      startCountdown();
      showVerificationInput.value = true;
    }
  }).catch(err => {

  })
}
function codeChange() {

}
function codeFinish() {
  // if (verificationCode.value.length === 6) {
  AuthAPI.retrieve({
    "username": mobile.value,
    "code": verificationCode.value
  }).then(res => {
    if (res.code === 200) {
      successModal.value.open()
    }
  })
  // }
}

</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.reset-pwd {
  width: 100vw;
  height: 100vh;
  background-color: #fff;

  .title {
    font-size: 20px;
    font-family: Arial, Arial-Regular;
    font-weight: Regular;
    text-align: left;
    color: #000000;
    line-height: 22px;
  }
}

.next-button {
  margin: 42rpx;
}

.phone-area {
  margin: 40rpx;
  height: 90rpx;
  background-color: $primary-f;
  border-radius: 8rpx;

  border: 1rpx solid #ddd;
  border-radius: 16rpx;

}

.code-area {
  display: flex;
  justify-content: center;
  padding: 40rpx 0;
}

.success-model {
  display: flex !important;
  align-items: center;
  flex-direction: column;

  .model-title {
    font-size: 28rpx;
    font-family: Arial, Arial-Regular;
    font-weight: Regular;
    text-align: center;
    color: #000000;
    line-height: 32rpx;
    padding: 40rpx;
  }

  .model-content {
    font-size: 22rpx;
    font-family: Arial, Arial-Regular;
    font-weight: Regular;
    text-align: center;
    color: #000000;
    line-height: 22rpx;
    padding: 0 40rpx;
  }
}

.disabled {
  pointer-events: none;
  cursor: not-allowed;
}
</style>
